<template>
  <footer class="footer">
    <span class="todo-count">剩余 <strong>{{ showList.length }}</strong></span>
    <ul class="filters">
      <li v-for="item in showArr" :key="item.index">
        <a :class="{selected:item.index === isShow}" href="javascript:;" @click="changeShow(item)">{{ item.label }}</a>
      </li>
    </ul>
    <button class="clear-completed" @click="delFinished">清除已完成</button>
  </footer>
</template>

<script>
import { mapMutations, mapState, mapGetters } from 'vuex'
export default {
  data() {
    return {
      showArr: [
        {label: '全部', index: 0},
        {label: '未完成', index: 1},
        {label: '已完成', index: 2},
      ],
      isShow: 0,  // 显示标识
    }
  },
  methods: {
    ...mapMutations(["setTaskList", "setFlag"]),
    delFinished() {
      const newArray = this._.cloneDeep(this.taskList)
      const resultArr = newArray.filter(item => item.isSelected === false)
      this.setTaskList(resultArr)
    },
    changeShow(item){
      this.isShow = item.index
      this.$store.commit('setFlag', item.index)
    }
  },
  computed: {
    ...mapState(['taskList']),
    ...mapGetters(['showList'])
  }
}
</script>
